<template>
	<view>
		<view class="container u-skeleton">
			<Back :toHome="toHome" />
			<view class="header"></view>
			<view class="search fonts u-skeleton-fillet" @tap="focus">
				<u-search placeholder="搜索你想要的内容" v-model="keyword" bg-color="white" height="80" :show-action="false" :disabled="true"></u-search>
			</view>
			<view class="header-title u-skeleton-rect">
				童趣绘本
				<image class="img" @tap="changeColumn" src="../../static/topic/change.png" mode="widthFix"></image>
			</view>
			<view class="column-container">
				<view v-for="(item, index) in picbookListData.group" :key="index">
					<view class="column-long fonts u-skeleton-fillet" @tap="toPicbookList(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300">
						<view class="text" v-if="columnIsShow">{{ item.mark }}</view>
						<view class="image" v-if="columnIsShow"><ImageLoad :src="item.coverUrl"/></view>
						<view class="content" v-if="columnIsShow">
							<view class="left">
								<image v-if="item.recommended" src="../../static/icon/recommend.png" mode="widthFix"></image>
								{{ item.name }}
							</view>
							<view class="right">进入专题</view>
						</view>
					</view>
				</view>
			</view>
			<view class="header-title u-skeleton-rect">更多阅读</view>
			<view class="column-container">
				<view v-for="(item, index) in picbookListData.column" :key="index">
					<view class="column u-skeleton-fillet" @tap="toPicbook(item)" hover-class="touch" hover-start-time="0" hover-stay-time="300">
						<view class="image"><ImageLoad :src="item.backgroundUrl"/></view>
						<view class="title fonts">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			picbookListData: {
				group: [{}, {}],
				randomGroup: [],
				column: [{}, {}, {}, {}]
			},
			columnIsShow: true,
			loading: true,
			keyword: '',
			toHome: false
		}
	},
	onLoad(option) {
		if (option && option.type === 'share') {
			this.toHome = true
		}
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/picbookList/picbookList?type=share',
			imageUrl: ''
		}
	},
	onShow() {
		this.loadData()
	},
	methods: {
		/**
		 * 获取数据
		 */
		loadData: async function() {
			//用户deviceUuid没有获取则轮训获取 直到获取成功
			if (!this.deviceUuid) {
				const timer = setTimeout(() => {
					this.loadData()
				}, 300)
				this.$once('hook:beforeDestory', function() {
					clearTimeout(timer)
				})
				return
			}
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadPicbookInitData, { deviceUuid: this.deviceUuid }))
			//请求错误重新请求
			if (err) {
				uni.showLoading({
					title: '正在加载',
					mask: true
				})
				const timer2 = setTimeout(() => {
					this.loadData()
				}, 1000)
				this.$once('hook:beforeDestory', function() {
					clearInterval(timer2)
				})
				return
			}
			this.picbookListData = {
				group: [data.groups[0], data.groups[1]],
				randomGroup: [data.groups[2], data.groups[3]],
				column: data.singlePicbooks
			}
			uni.hideLoading()
			//隐藏骨架屏
			this.loading = false
		},
		/**
		 *	点击进入绘本列表
		 */
		toPicbookList: function(items) {
			this.$Router.push({ name: 'picbookListDetail', query: { item: JSON.stringify(items) } })
		},
		/**
		 *  点击获取绘本数据 进入绘本阅读
		 */
		toPicbook: async function(item) {
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadPicbookData, { picbookId: item.id }))
			if (err) {
				uni.showToast({
					title: '网络异常',
					icon: 'none',
					duration: 2000
				})
				return
			}
			this.$Router.push({ name: 'picbook', query: { item: JSON.stringify(data.picbook) } })
		},
		changeColumn: function() {
			const [group, randomGroup] = [JSON.parse(JSON.stringify(this.picbookListData.group)), JSON.parse(JSON.stringify(this.picbookListData.randomGroup))]
			this.picbookListData.group = randomGroup
			this.picbookListData.randomGroup = group
			this.columnIsShow = false
			setTimeout(() => {
				this.columnIsShow = true
			}, 0)
		},
		focus: function() {
			this.$Router.push({ name: 'search', query: { type: 'picbook' } })
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	height auto
	min-height 100vh
	display flex
	flex-direction column
	background white

	.header
		width 750rpx
		height 320rpx
		background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/homeTop.png') 0 0 / 100% 100%
		position absolute

	.search
		z-index 1
		width 680rpx
		margin 190rpx auto 50rpx auto
		filter drop-shadow(2rpx 2rpx 5rpx #c4c4c4)

	.header-title
		font-size 50rpx
		margin 20rpx 0 0 40rpx
		position relative
		width 680rpx
		z-index 1
		font-weight bold

		image
			position absolute
			width 150rpx
			height auto
			right 0rpx
			bottom 20rpx

	.column-container
		width 680rpx
		height auto
		margin 0 auto 20rpx auto
		display flex
		flex-wrap wrap
		justify-content space-between

		.column-long
			width 680rpx
			height 480rpx
			border-radius 30rpx
			overflow hidden
			transform translate3d(0, 0, 0)
			box-shadow 0 0 50rpx #909399
			transition all 0.3s
			font-size 35rpx
			position relative
			margin 30rpx 0

			.text
				color white
				font-size 40rpx
				height 100rpx
				width 100%
				position absolute
				left 0
				top 0
				padding 20rpx 20rpx 0 0
				box-sizing border-box
				text-align right
				background linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0))
				z-index 1

			.image
				height 400rpx

			.content
				width 100%
				height 80rpx
				display flex
				align-items center
				justify-content space-between
				color #7B2300
				padding 0 30rpx
				box-sizing border-box

				image
					width 35rpx
					height auto
					margin-right 10rpx

				.left
					display flex
					align-items center
					justify-content center

				.right
					background #FED36B
					width 170rpx
					height 60rpx
					border-radius 40rpx
					display flex
					align-items center
					justify-content center
					font-size 25rpx
					letter-spacing 3rpx
					color white
					text-shadow 1rpx 1rpx 2rpx #FFA600

		.column
			width 320rpx
			height 380rpx
			margin 40rpx 0
			background white
			border-radius 30rpx
			box-shadow 0 0 50rpx #dcdfe6
			display flex
			flex-direction column
			overflow hidden
			transform translate3d(0, 0, 0)
			transition all 0.3s
			font-size 30rpx

			.image
				width 320rpx
				height 320rpx
				position relative

			.title
				color #606266
				font-size 30rpx
				line-height 60rpx
				height 60rpx
				text-align center
</style>
